<script setup lang="ts">

import {ref} from "vue";

const aiImg = ref('/assets/ai.png')
const discountImg = ref('/assets/discount.png')
const giveImg = ref('/assets/give.png')
const memberBuyImg = ref('/assets/memberBuy.png')

</script>

<template>
  <div class="member-center-main-header-top">
    <div class="member-center-main-header-top-text-box">
      <el-text class="member-color  header-btn-margin-message">会员特权</el-text>
    </div>
    <div class="member-center-main-header-top-img-btn-box">
      <div class="img-btn-box">
        <el-image :src="aiImg" class="member-img"/>
        <el-button class="member-color" link>AI工具集</el-button>
      </div>
      <div class="img-btn-box">
        <el-image :src="discountImg" class="member-img"/>
        <el-button class="member-color" link>领券中心</el-button>
      </div>
      <div class="img-btn-box">
        <el-image :src="giveImg" class="member-img"/>
        <el-button class="member-color" link>增3个月</el-button>
      </div>
      <div class="img-btn-box">
        <el-image :src="memberBuyImg" class="member-img"/>
        <el-button class="member-color" link>会员购</el-button>
      </div>
    </div>
  </div>
  <div class="member-center-main-header-bottom">
    <el-button link>领取限时优惠券，
      <el-text class="member-color">低至0.5/天</el-text>
    </el-button>
    <div class="header-btn-gl">
     <el-button class="member-color member-btn-background" round>立即开通</el-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import "style/MemberCenter";
@import "style/MainHeader";
</style>